<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<title>Document</title>-->
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <!--滑块-->
    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet">-->
    <link href="/static/app/huakuai/demo/base.css" rel="stylesheet">
    <link href="/static/app/huakuai/dist/srs.css" rel="stylesheet">
    <script src="/static/app/huakuai/dist/jquery.js"></script>
    <script src="/static/app/huakuai/dist/srs.js"></script>
    <!--<script src="/static/app/huakuai/demos/googlegg.js"></script>-->
    <!--滑块-->
    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>

    <style>
        .bottom-center {
            width: 100%;
            height: 1rem;
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            position: absolute;
            bottom: 2.28rem;
            z-index: 999;
            opacity: 0.85;
        }

        .bottom {
            width: 100%;
            height: 3.29rem;
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            position: absolute;
            bottom: 0rem;
            z-index: 999;
            /*opacity:0.85;*/
        }

        .address {
            width: 100%;
            height: 0.6rem;
            padding-top: 0.3rem;
            /* margin-top: 0.15rem; */
            /* margin-left: 0.2rem; */
            padding-left: 0.2rem;
            font-size: 0.26rem;
            border-bottom: 0.003rem solid #ebedf0;
        }

        .getime {
            margin-top: 0.3rem;
            margin-left: 0.2rem;
            font-size: 0.262rem;
            color: #666;
            display: inline-block;
        }

        .type {
            margin-top: 0.1rem;
            margin-left: 0.2rem;
            font-size: 0.262rem;
            color: #666;
            display: inline-block;
        }

        .search {
            width: 80%;
            height: 0.65rem;
            background-color: #fff;
            position: absolute;
            top: 1.3rem;
            left: 10%;
            z-index: 999;
            opacity: 0.85;
            border-radius: 0.1rem;
        }

        .ares {
            width: 80%;
            margin-top: 0.16rem;
            background: transparent;
            border: none;
            outline: medium;
        }

        .laimg {
            margin-top: 0.16rem;
            position: relative;
        }

        .en_name {
            width: 100%;
            height: 1.5rem;
            border-bottom: 0.003rem solid #ebedf0;
        }

        .en_nameas {
            /* width: 60%; */
            height: 0.6rem;
            border: 0.02rem solid #ebedf0;
            border-radius: 0.1rem;
            margin-top: 0.4rem;
            outline: medium;
        }

        .button_lar {
            width: 80%;
            color: #fff;
            background-color: #86bd90;
            font-size: 0.3rem;
            text-align: center;
            border-radius: 1rem;
            padding-top: 0.27rem;
            padding-bottom: 0.27rem;
            margin: 0 8% 0;
            font-weight: bold
        }

        .anmi {
            margin-left: 5%;
            margin-top: 0.1rem;
            color: #33b0ef;
            font-size: 0.3rem;
            border: 0;
            border-radius: 0.1rem;
            /* background-color: #0b76ac; */
            outline: none;
            width: 1.5rem;
            position: absolute;
            left: -0.5rem;
        }
.sug_val{
    margin-right: 0.5rem;
}
        .district{
            color: #777777;
        }
    </style>
</head>
<body>
<div class="header">
    <div><a href="{:url('fencead')}"><img src="/static/app/img/fanh.png"></a></div>
    <div>安全围栏</div>
    <div><a href="javascript:;" class="head-btn iconfont"></a></div>
</div>
<div id="allmap" class="tpl-content-wrapper" style="width:100%; height:11.5rem"></div>
<!--<img src="/static/app/img/suosou.png" onclick="searchByStationName()"/>-->
<input type="hidden" name="lon" class="lon">
<input type="hidden" name="lat" class="lat">
<div class="search">
    <input type="text" name="address" class="ares" placeholder="请输入地址">
    <span class="laimg">
        <!--onclick="searchByStationName()"-->
    <button class="anmi" >搜索</button>

    </span>
    <div class="theonlysug main-sug autocomplete-suggestions" style="position: absolute; min-width: 98%; max-height: 350px; z-index: 3999; background-color: #fff">

    </div>
</div>
<div class="wrap" style="display: none">
    <input id="example-2" name="example-2" placeholder="300 - 1000" type="number" min="300" max="1000" step="50"
           value="300" data-color="#1C8EC5" class="srs">
</div>
<div class="bottom" style=" display: inline-block;">
    <div class="address"></div>
    <div class="en_name">围栏名称：<input type="text" name="en_name" class="en_nameas" placeholder="学校、公司、家"></div>
    <input type="hidden" name="adius" class="adius" value="">
    <!--<input type="hidden" name="lnglat" class="lnglat" value="">-->
    <div class="button_lar" onclick="tijiao()">提 交</div>
</div>

<div class="footer">
</div>

</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script>
<!--百度地图api-->
<script type="text/javascript" src="/static/baidumap/js/jquery.bdmap.js"></script><!--百度地图API模块化成函数供前台调用-->
<!--滑块-->
<script src="/static/layer/layer.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".anmi").click(function() {
            search2();
        });
    });
    //搜索地址和经纬度
    function search2(){
        var formData=[];
        formData['keywords']=$('[name="address"]').val();
        $.ajax({
            url:"{:url('gaode')}",
            type:'GET',
            data:{'keywords':formData['keywords']},
            dataType:'json',
            success:function(res){
                $html='';
                if (res.info=='OK'){

                    $.each(res.tips,function ($k,$v){
                        $loca=$v.location;
                        if($loca.length!=0){
                             // $loca = $loca.split(',');
                            $html+='<div class="poi autocomplete-suggestion" onclick="select_site('+$loca["bd_lon"]+','+$loca["bd_lat"]+',\''+$v.name+'\')">\n' +
                                '       <p><span class="sug_val">'+$v.name+'</span><span class="district"  adcode="350211">'+$v.district+$v.address+'</span></p>\n' +
                                '   </div>';

                        }

                    })



                }
                $('.autocomplete-suggestions').html($html);
            }
        });
    }
    function select_site($bd_lon,$bd_lat,$name) {
        //删除
        $('.autocomplete-suggestions').children().remove();
        $('[name="address"]').val($name);
        $('.address').text($name);
//        console.log($name);
        $lng = $('.lon').val($bd_lon);
        $lat = $('.lat').val($bd_lat);
        var map = new BMap.Map('allmap');    // 创建Map实例
        BDMapInit(map, {"point": "118.096226,24.623076"});
        var localSearch = new BMap.LocalSearch(map);
        var keyword = $(".ares").val();
            $fwei = $('.srs-thumb').children('span').text();
            if ($fwei == '') {
                $fwei = 1000;
            }
            $('.adius').val($fwei);
            var point = new BMap.Point($bd_lon,$bd_lat); // 初始化地图中心点
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);
            labelArr.push(marker);             // 将标注添加到地图中
            map.centerAndZoom(point, 15);
            //光标范围
            var circle = new BMap.Circle(point, $fwei, {
                fillColor: "#3399FF",
                strokeWeight: 2,
                fillOpacity: 0.07,
                strokeOpacity: 0.2
            });
            map.addOverlay(circle);
            circleArr.push(circle);

            map.addEventListener("dragend", function () {
                var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat); // 初始化地图中心点
                address(map.getCenter().lat, map.getCenter().lng);
                $('.lon').val(map.getCenter().lng);
                $('.lat').val(map.getCenter().lat);
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);
                // 将标注添加到地图中
                var ZoomNum=0;
                //获取缩放比例
                map.addEventListener("zoomend", function(e){
                    ZoomNum = map.getZoom();
                });
                map.centerAndZoom(point,ZoomNum);// 将标注添加到地图中
                //光标范围
                var circle = new BMap.Circle(point, $fwei, {
                    fillColor: "#3399FF",
                    strokeWeight: 2,
                    fillOpacity: 0.07,
                    strokeOpacity: 0.2
                });
                for (var i = 0; i < circleArr.length; i++) {
                    map.removeOverlay(circleArr[i]);
                }
                for (var i = 0; i < labelArr.length; i++) {
                    map.removeOverlay(labelArr[i]);
                }
                map.addOverlay(circle);
                circleArr.push(circle);
                labelArr.push(marker);

            });
        $('.wrap').css('display', 'block');
    }
    var circleArr = []; //存储circle覆盖物的数组
    var labelArr = []; //存储文本标记的数组
    $(function () {
        //检查有无设备

        $fwei = 300;
        var map = new BMap.Map('allmap');    // 创建Map实例
        BDMapInit(map, {"point": "118.096226,24.623076"});
        //监听元素值改变事件
        $(".srs-thumb").children('span').bind("DOMNodeInserted", function (e) {
            var map = new BMap.Map('allmap');    // 创建Map实例
            $lng = $('.lon').val();
            $lat = $('.lat').val();
            if ($lng) {
                BDMapInit(map, {"point": $lng + ',' + $lat});
            } else {
                BDMapInit(map, {"point": "118.096226,24.623076"});
            }
            $fwei = $('.srs-thumb').children('span').text();
            if ($fwei == '') {
                $fwei = 1000;
            }
            $('.adius').val($fwei);
            for (var i = 0; i < circleArr.length; i++) {
                map.removeOverlay(circleArr[i]);
            }
            for (var i = 0; i < labelArr.length; i++) {
                map.removeOverlay(labelArr[i]);
            }
            var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat); // 初始化地图中心点
//           console.log(map.getCenter().lng)
            address(map.getCenter().lat, map.getCenter().lng);
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);
            labelArr.push(marker);
            var ZoomNum=0;
            //获取缩放比例
            map.addEventListener("zoomend", function(e){
                ZoomNum = map.getZoom();
            });
            map.centerAndZoom(point,ZoomNum);// 将标注添加到地图中
//            map.centerAndZoom(point, 15);
            //光标范围
            var circle = new BMap.Circle(point, $fwei, {
                fillColor: "#3399FF",
                strokeWeight: 2,
                fillOpacity: 0.07,
                strokeOpacity: 0.2
            });
            map.addOverlay(circle);
            circleArr.push(circle);

            map.addEventListener("dragend", function () {
                var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat); // 初始化地图中心点
                $('.lon').val(map.getCenter().lng);
                $('.lat').val(map.getCenter().lat);
                address(map.getCenter().lat, map.getCenter().lng);
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);
                var ZoomNum=0;
                //获取缩放比例
                map.addEventListener("zoomend", function(e){
                    ZoomNum = map.getZoom();
                });

                map.centerAndZoom(point,ZoomNum);				// 将标注添加到地图中// 将标注添加到地图中
                //光标范围
                var circle = new BMap.Circle(point, $fwei, {
                    fillColor: "#3399FF",
                    strokeWeight: 2,
                    fillOpacity: 0.07,
                    strokeOpacity: 0.2
                });
                for (var i = 0; i < circleArr.length; i++) {
                    map.removeOverlay(circleArr[i]);
                }
                for (var i = 0; i < labelArr.length; i++) {
                    map.removeOverlay(labelArr[i]);
                }
                map.addOverlay(circle);
                circleArr.push(circle);
                labelArr.push(marker);

            });


        })
    })

    //地址搜索
    function searchByStationName() {
        var map = new BMap.Map('allmap');    // 创建Map实例
        BDMapInit(map, {"point": "118.096226,24.623076"});
        var localSearch = new BMap.LocalSearch(map);
        var keyword = $(".ares").val();
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            $fwei = $('.srs-thumb').children('span').text();
            if ($fwei == '') {
                $fwei = 1000;
            }
            $('.adius').val($fwei);
//           var circleArr = []; //存储circle覆盖物的数组
//           var labelArr = []; //存储文本标记的数组
            var point = new BMap.Point(poi.point.lng, poi.point.lat); // 初始化地图中心点
            $('.lon').val(poi.point.lng);
            $('.lat').val(poi.point.lat);
//           console.log(point);
            address(poi.point.lat, poi.point.lng);
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);
            labelArr.push(marker);             // 将标注添加到地图中
            map.centerAndZoom(point, 15);
            //光标范围
            var circle = new BMap.Circle(point, $fwei, {
                fillColor: "#3399FF",
                strokeWeight: 2,
                fillOpacity: 0.07,
                strokeOpacity: 0.2
            });
            map.addOverlay(circle);
            circleArr.push(circle);

            map.addEventListener("dragend", function () {
                var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat); // 初始化地图中心点
                address(map.getCenter().lat, map.getCenter().lng);
                $('.lon').val(map.getCenter().lng);
                $('.lat').val(map.getCenter().lat);
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);              // 将标注添加到地图中
                map.centerAndZoom(point, 15);
                //光标范围
                var circle = new BMap.Circle(point, $fwei, {
                    fillColor: "#3399FF",
                    strokeWeight: 2,
                    fillOpacity: 0.07,
                    strokeOpacity: 0.2
                });
                for (var i = 0; i < circleArr.length; i++) {
                    map.removeOverlay(circleArr[i]);
                }
                for (var i = 0; i < labelArr.length; i++) {
                    map.removeOverlay(labelArr[i]);
                }
                map.addOverlay(circle);
                circleArr.push(circle);
                labelArr.push(marker);

            });
        });
        localSearch.search(keyword);
        $('.wrap').css('display', 'block');

    }

    //获取所选地址
    function address($lat, $lng) {
        $.ajax({
            url: "{:url('Map/address')}",
            type: 'post',
            data: {
                lat: $lat, lng: $lng
            },
            dataType: 'json',
            success: function (res) {
                    $('.address').text(res.data);

            }
        });
    }

    //提交围栏
    function tijiao() {
        $lng = $('.lon').val();
        $lat = $('.lat').val();
        $en_name = $('[name="en_name"]').val();
        if ($lng == '') {
            layer.alert('请搜索确认地址', {icon: 2});
            return false;
        }
        if ($en_name == '') {
            layer.alert('请输入围栏名称', {icon: 2});
            return false;
        }
        if ($en_name.length > 6) {
            layer.alert('名称限制6位内', {icon: 2});
            return false;
        }
        $.ajax({
            url: "{:url('Map/enadd')}",
            type: 'post',
            data: {
                en_name: $('.en_nameas').val(),
                radius: $('.adius').val(),
                address: $('.address').text(),
                bdlat: $lat,
                bdlng: $lng
            },
            dataType: 'json',
            success: function (res) {
                if (res.code != 200) {
                    layer.msg(res.msg, {shade: 0.5, time: 1000, icon: 2});
                    return false;
                }
                window.location.href = "{:url('Map/fencead')}";
            }
        });
    }
</script>
<script>

</script>
</html>